<template>
	<el-dialog :title="title" v-if="button" v-model="state">
		<el-form label-width="80px">
			<el-form-item label="菜单名称">
				<el-input v-model="button.name"></el-input>
			</el-form-item>


			<el-form-item label="根菜单" v-if="!subbutton">
				<el-checkbox v-model="rootMenu"></el-checkbox>
			</el-form-item>


			<section v-if="!rootMenu">
				<el-form-item label="类型">
					<el-select placeholder="选择子菜单类型" v-model="button.type">
						<el-option v-for="item in types" :key="item.name" :label="item.name" :value="item.value" :disabled="item.disabled"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item v-if="button.type==='media_id' || button.type==='view_limited'" label="MEDIA_ID">
					<el-input type="text" v-model="button.mediaId"></el-input>
				</el-form-item>
				<el-form-item v-if="button.type==='view'" label="URL">
					<el-input type="text" v-model="button.url"></el-input>
				</el-form-item>
				<el-form-item v-if="button.type==='location_select'||button.type==='click'||button.type==='pic_sysphoto'||button.type==='pic_photo_or_album'||button.type==='pic_weixin'||button.type==='scancode_waitmsg'||button.type==='scancode_push'" label="KEY">
					<el-input type="text" v-model="button.key"></el-input>
				</el-form-item>
			</section>

		</el-form>
		<el-row>
			<el-col align="right">
				<el-button @click.native="cancel">取消</el-button>
				<el-button type="primary" @click.native="submit">提交</el-button>
			</el-col>
		</el-row>
	</el-dialog>
</template>

<script>
	export default {
		name:'wechat-button',
		props:['subbutton','editButton'],
		data(){
			return {
				rootMenu:false,
				types:[
					{name:'显示',value:'view'},
					{name:'点击',value:'click'},
					{name:'扫码带提示',value:'scancode_waitmsg'},
					{name:'扫码推事件',value:'scancode_push'},
					{name:'系统拍照发图',value:'pic_sysphoto'},
					{name:'拍照或者相册发图',value:'pic_photo_or_album'},
					{name:'微信相册发图',value:'pic_weixin'},
					{name:'发送位置',value:'location_select'},
					{name:'图片',value:'media_id'},
					{name:'图文消息',value:'view_limited'},
				],
				state:false,
				title:undefined,
				button:undefined,
			};
		},
		methods:{
			initialize(){
				this.state = true;
				if(this.subbutton){
					this.title='新建sub菜单';
					this.rootMenu = false;
				}else{
					this.title = '新建菜单';

				}
				if(this.editButton){
					this.button = JSON.parse(JSON.stringify(this.editButton));
				}else{
					this.button = {name:'',type:'',subButtons:[]}
				}

			},
			submit(){
				let error;
				if(!this.button.name) error = '名称不能为空';
				if(!this.rootMenu){
					if(!this.button.type) error = '类型不能为空';
				}else{
					delete this.button.type;
					this.button.subButtons.push({type: 'view',name: '搜索',url: 'http://www.soso.com/'})
				}
				if(error){
					this.$message({type:'error',message:error})
				}else{
					if(this.editButton){
						this.button.editing = true;
						const result = Object.assign(this.editButton,this.button);
						this.$emit('submit',result);
					}else{
						this.$emit('submit',this.button);
					}
					this.state = false;
				}
			},
			cancel(){
				this.state = false;
			},
		}
	}
</script>

<style lang="scss"></style>
